import React, { useState, useEffect } from 'react';
import { exportWord } from 'mhtml-to-word'
import axios from 'axios'
import { SearchOutlined, DownloadOutlined, PrinterOutlined, EyeOutlined } from '@ant-design/icons';
import { Popconfirm, message, Breadcrumb, Input, Row, Col, Button, Divider, Table, Modal, Form, Radio, Select } from 'antd';

const JiaoFeiGuanLi = () => {
    //获取查询form数据
    const onFinish = (values) => {
        console.log('Success:', values);
        axios("/jiaoFeiGuanLi/chaXunFenYe", {
            method: "get",
            params: { page: 1,...values }
        })
            .then(res => {
                // console.log(res)
                res.data.data.forEach((item, index, arr) => {
                    item.xingMing = item.ruYuanBingRenJiBenZiLiaoDengJi.xingMing
                    // item.yiLiaoZhengHao = item.ruYuanBingRenJiBenZiLiaoDengJi.yiLiaoZhengHao
                    // item.xingBie = item.ruYuanBingRenJiBenZiLiaoDengJi.xingBie
                    item.shenFenZhengHao = item.ruYuanBingRenJiBenZiLiaoDengJi.shenFenZhengHao
                    // item.keBie = item.ruYuanBingRenJiBenZiLiaoDengJi.keBie
                    item.ruYuanRiQi = item.ruYuanBingRenJiBenZiLiaoDengJi.ruYuanRiQi
                    item.yingJiaoKuan=item.yingJiaoKuan==null?'0':item.yingJiaoKuan
                    item.yiJiaoKuan=item.yiJiaoKuan==null?'0':item.yiJiaoKuan
                    item.weiJiaoKuan=item.weiJiaoKuan==null?'0':item.weiJiaoKuan
                    item.zhuangTai=item.zhuangTai==0?'未结清':'已结清'
                })
                setDataSource(res.data.data)
                setTotal(res.data.data.length)
            })
            .catch(err => {
                console.log(err)
            })
    };



    //table数据
    const [dataSource, setDataSource] = useState([])
    //模态框数据
    const [initialValuesData, setInitialValuesData] = useState({})
    //总条数
    const [total, setTotal] = useState(0)

    //table表头
    const columns = [
        {
            title: '姓名',
            dataIndex: 'xingMing',
            key: 'id',
            align: "center",
            width: 100,
        },
        {
            title: '身份证号码',
            dataIndex: 'shenFenZhengHao',
            key: 'id',
            align: "center",
            width: 200
        },
        {
            title: '住院日期',
            dataIndex: 'ruYuanRiQi',
            key: 'id',
            align: "center",
            width: 200
        },
        {
            title: '住院号',
            dataIndex: 'zhuYuanHao',
            key: 'id',
            align: "center",
            width: 200
        },
        {
            title: '应交款',
            dataIndex: 'yingJiaoKuan',
            key: 'id',
            align: "center",
            width: 100
        },
        {
            title: '已交款',
            dataIndex: 'yiJiaoKuan',
            key: 'id',
            align: "center",
            width: 100
        },
        {
            title: '未交款',
            dataIndex: 'weiJiaoKuan',
            key: 'id',
            align: "center",
            width: 100
        },
        {
            title: '状态',
            dataIndex: 'zhuangTai',
            key: 'id',
            align: "center",
            width: 100
        }
    ];

    //table分页
    const paginationProps = {
        pageSize: 10,
        onChange: (page) => { console.log(page); getData(page) },
        total: { total },
        showQuickJumper: true,
        showTotal: (total, range) => `共${total}条数据`,
        position: ["bottomCenter"]
    }





    //获取数据
    const getData = (nowPage) => {
        axios("/jiaoFeiGuanLi/chaXunFenYe", { params: { page: nowPage } })
            .then(res => {
                console.log(res)
                res.data.data.forEach((item, index, arr) => {
                    item.xingMing = item.ruYuanBingRenJiBenZiLiaoDengJi.xingMing
                    // item.yiLiaoZhengHao = item.ruYuanBingRenJiBenZiLiaoDengJi.yiLiaoZhengHao
                    // item.xingBie = item.ruYuanBingRenJiBenZiLiaoDengJi.xingBie
                    item.shenFenZhengHao = item.ruYuanBingRenJiBenZiLiaoDengJi.shenFenZhengHao
                    // item.keBie = item.ruYuanBingRenJiBenZiLiaoDengJi.keBie
                    item.ruYuanRiQi = item.ruYuanBingRenJiBenZiLiaoDengJi.ruYuanRiQi
                    item.yingJiaoKuan=item.yingJiaoKuan==null?'0':item.yingJiaoKuan
                    item.yiJiaoKuan=item.yiJiaoKuan==null?'0':item.yiJiaoKuan
                    item.weiJiaoKuan=item.weiJiaoKuan==null?'0':item.weiJiaoKuan
                    item.zhuangTai=item.zhuangTai==0?'未结清':'已结清'
                })
                setDataSource(res.data.data)
                setTotal(res.count)
            })
            .catch(err => {
                console.log(err)
            })
    }

    function exportTable(){
        exportWord({
            filename: "缴费管理表",
            selector: ".export",
            style:''
        })
    }
    useEffect(() => {
        getData(1)
    }, [Form])

    return (
        <div>
            <Breadcrumb style={{ marginBottom: 24 }}>
                <Breadcrumb.Item>在院计费</Breadcrumb.Item>
                <Breadcrumb.Item>缴费管理</Breadcrumb.Item>
            </Breadcrumb>
            <div className="site-layout-background" style={{ padding: 24, margin: 12, minHeight: 70 }}>
                <Row justify="space-between" align="middle">
                    <Col span={24}>
                        <Form
                            layout="inline"
                            onFinish={onFinish}
                            name="chaXunForm"
                        >

                            <Form.Item label="姓名：" name="xingMing" >
                                <Input placeholder="请输入姓名" />
                            </Form.Item>
                            <Form.Item label="住院号：" name="zhuYuanHao">
                                <Input placeholder="请输入住院号" />
                            </Form.Item>
                            <Form.Item >
                                <Button type="primary" icon={<SearchOutlined />} htmlType="submit">查询</Button>
                            </Form.Item>
                        </Form>
                    </Col>
                </Row>
                <Row style={{ marginTop: 24 }}>
                    <Col span={12}>
                        <Button type="primary" shape="round" icon={<DownloadOutlined />} onClick={exportTable}>
                            导出选中数据
                        </Button>
                    </Col>
                </Row>

            </div>
            <div className="site-layout-background" style={{ padding: 24, margin: 12, minHeight: 300 }}>
                <Divider orientation="left" style={{ fontWeight: 600, fontSize: 20 }}>缴费管理表</Divider>
               <div className='export'>
                <Table
                    dataSource={dataSource}
                    columns={columns}
                    pagination={paginationProps}
                    // onRow={record => {
                    //     return {
                    //         onClick: event => {
                    //             // console.log(record); 
                    //             sessionStorage.setItem("info", JSON.stringify(record))
                    //         }, // 点击行
                    //     };
                    // }}
                    childrenColumnName
                />
                 </div>
            </div>
        </div>
    );
}

export default JiaoFeiGuanLi;
